<template>
	<div class="app">
		<div class="store_list">
			<div class="item" v-for="(item,index) in accountList" :key="item.user_id" @click="toIndex(item,index)">
				<div class="left">
					<div class="avatar">
						<img :src="item.user_picture" />
					</div>
					<div class="info">
						<div class="name">
							<span>{{ item.nick_name }}</span>
							<img v-if="item.vip_level == 0" :src="`${constant.imgUrl}publicicon/icon_vipwei.png`" />
							<img v-else :src="`${constant.imgUrl}publicicon/icon_vipkai.png`" />
						</div>
						<span class="role">{{ item.role_name }}</span>
					</div>
				</div>
				<div class="right">
					<i v-if="userInfo.user_id == item.user_id" class="iconfont iconxuanze" />
					<i v-else class="iconfont iconjiantou" />
				</div>
			</div>
		</div>

		<div class="btn_wrap">
			<div class="add_btn" @click="jump">
				<span>
					<i class="iconfont iconicon-test" />
					<span class="txt">添加店铺</span>
				</span>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAccountList } from '@/api/common'
import { switchStore } from '@/api/auth'
import { getUser, getBasicUser } from '@/utils/auth'

export default {
	data() {
		return {
			constant: this.$constant,
			accountList: [],
			constant: this.$constant
		}
	},
	onLoad(optin) {},
	onShow() {
		this.getAccountListFn()
	},
	computed: {
		...mapGetters({
			userInfo: 'getUser'
		})
	},
	methods: {
		getAccountListFn() {
			getAccountList().then(res => {
				res.data.childrenAccountList.unshift(res.data.self)
				this.accountList = res.data.childrenAccountList
			})
		},
		toIndex(item, index) {
			uni.showLoading({
				title: '切换店铺中...'
			})
			// =================
			console.log(this.constant)
			let miniAppId = uni.getAccountInfoSync().miniProgram.appId
			if ((this.constant.oemSource == 1 || this.constant.oemSource == 4) && (item.role_id == 2)) {
				if (miniAppId == 'wx231d0e488b073822') {
					uni.hideLoading()
					uni.navigateToMiniProgram({
						appId: 'wx3a163add860e0a86'
					})
				} else {
					this.jumpIndex(item, index)
				}
			} else if ((this.constant.oemSource == 1 || this.constant.oemSource == 4) && (item.role_id != 2)) {
				if (miniAppId == 'wx3a163add860e0a86') {
					uni.hideLoading()
					uni.navigateToMiniProgram({
						appId: 'wx231d0e488b073822'
					})
				} else {
					this.jumpIndex(item, index)
				}
			} else {
				this.jumpIndex(item, index)
			}
		},
		jumpIndex(item, index) {
			const params = {
				accout_type: index == 0 ? 'self' : 'children_account',
				user_id: item.user_id
			}
			switchStore(params).then(res => {
				if (res.status == 'success') {
					uni.setStorageSync('user_id', res.data.user_id)
					uni.setStorageSync('token', res.data.token)
					getBasicUser(res.data.user_id, true).then(() => {
						getUser(true).then(() => {
							uni.hideLoading()

							let query = {
								owner_user_id: res.data.user_id,
								share_user_id: res.data.user_id
							}
							let url = res.data.role_id == 2 ? `/pages/design/material/index${this.commonJS.queryData(query)}` : `/pages/getGuest/index${this.commonJS.queryData(query)}`
							uni.reLaunch({
								url: url
							})
						})
					})
				}
			})
		},
		jump() {
			uni.navigateTo({
				url: `/pages/admin/setting/addStore`
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.app {
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	.iconxuanze {
		color: #ff6900;
		font-size: 48px;
	}
	.store_list {
		padding-left: 30px;
		background-color: #fff;
		.item {
			height: 120px;
			background: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 30px;
			& + .item {
				border-top: 1px solid rgba(238, 238, 238, 1);
			}
			.left {
				display: flex;
				align-items: center;
				.avatar {
					width: 90px;
					height: 90px;
					border-radius: 50%;
					overflow: hidden;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.info {
					padding-left: 19px;
					height: 90px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.name {
						font-size: 30px;
						font-weight: 600;
						color: rgba(51, 51, 51, 1);
						line-height: 1;
						display: flex;
						align-items: center;
						margin-bottom: 8px;
						img {
							width: 42px;
							height: 37px;
							margin-left: 6px;
						}
					}
					.role {
						font-size: 24px;
						color: rgba(153, 153, 153, 1);
					}
				}
			}
			.right {
				img {
					width: 18px;
					height: 18px;
				}
			}
		}
	}
	.btn_wrap {
		padding: 60px 30px 0;
		.add_btn {
			width: 100%;
			display: block;
			text-align: center;
			// display: flex;
			// justify-content: center;
			height: 90px;
			line-height: 90px;
			background: rgba(255, 255, 255, 1);
			border-radius: 10px;
			> span {
				// display: flex;
				// align-items: center;
				.iconicon-test {
					color: #ff6900;
					font-size:28px;
				}
				.txt {
					font-size:24px;
					color: rgba(255, 105, 0, 1);
					padding-left: 11px;
					vertical-align: top;
				}
			}
		}
	}
</style>
